<script lang="ts" setup>
import { onMounted, reactive, ref, computed, watch } from 'vue';
import type { FormInstance, FormRules, TabsPaneContext } from 'element-plus'
import { Check, User, Finished, UserFilled, Plus, Search, Refresh } from '@element-plus/icons-vue'
import http from '@/http'
import { ElMessage } from 'element-plus';
import useStore from 'element-plus/es/components/table/src/store';
import { useUserStore } from '@/stores/user';
import { el, id } from 'element-plus/es/locale';


//患者信息
const patientInformation = ref({
  patientId: '',
  patientName: '',
  idCard: '',
  phone: '',
  sex: '',
  birthday: '',
  age: '',
  address: '',
  allergyInfo: ''
})

const patientData = ref('患者档案')
const patientDataClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}

const caseOrPrescription = ref('病例')
const caseOrPrescriptionClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}

const HangingTypeValue = ref('门诊')
const HangingType = [
  '门诊',
  '急诊',
]

//病例单信息
const caseList = ref({
  receiveType: '',
  isContagious: '',
  caseTitle: '',
  caseResult: '',
  doctorTips: '',
  remark: '',
  userId: '',
  userName: '',
  deptName:'',
  patientId: '',
  patientName: '',
  regId: ''
})

//保存病例单
function saveCases() {
  const {
    receiveType,
    isContagious,
    caseTitle,
    caseResult,
    doctorTips,
    remark,
  } = caseList.value;

  const userStore = useUserStore();
  const user = userStore.getUser.value;
  caseList.value.userId = user.userId;
  caseList.value.userName = user.userName;
  const patientId = patientInformation.value.patientId;
  const patientName = patientInformation.value.patientName;
  caseList.value.patientId = patientId;
  caseList.value.patientName = patientName;
  caseList.value.regId = regId.value;
  caseList.value.deptName = '';

  // 检查各个字段是否为空，只要有一个为空就提示用户填写完整信息
  if (!receiveType || !isContagious || !caseTitle || !caseResult || !doctorTips || !remark) {
    ElMessage({
      message: '请填写病例单的所有信息！',
      type: 'warning',
    });
  } else {
    http.post('/hisCareHistory/addHisCareHistory', caseList.value)
      .then((res) => {
        if (res == 1) {
          //弹出添加成功提示框
          ElMessage({
            message: '添加成功',
            type: 'success',
          })
          //清空
          caseList.value = {
            userId: '',
            userName: '',
            patientId: '',
            patientName: '',
          }
          //获取病例编号
          http.get('/hisCareHistory/getChId?id=' + regId.value)
            .then((res) => {
              if (res != "") {
                chId.value = res;
              }
            })
        } else {
          ElMessage({
            message: '添加失败',
            type: 'error',
          })
        }
      })
  }
}


//控制查询待就诊的患者的模态框的显示
const centerDialogVisible = ref(false)
//查询待就诊的患者
function queryPatientInformation() {
  centerDialogVisible.value = true;
  http.get('/hisRegistration/queryWithMedicalList')
    .then((res) => {
      if (res != "") {
        queryWithMedicalList.value = res;
      } else {
        ElMessage({
          message: '暂时没有待就诊的患者',
          type: 'success',
        })
      }
    })
}
//查询待就诊的患者信息
const queryWithMedicalList = ref([]);
//查询就诊中的患者信息
const queryTheListOfVisitsInProgress = ref([])
//查询就诊完成的患者信息
const queryTheListOfCompletedMedicalVisits = ref([])

//当前页
let pageNum = ref(1)
//每页条数
let pageSize = ref(4)
//总条数
let total = ref(0)

//选择挂号患者
const selectRegisteredPatients = ref('待就诊列表')
const selectRegisteredPatientsClick = (tab: TabsPaneContext, event: Event) => {
  if (tab.props.name == "待就诊列表") {
    http.get('/hisRegistration/queryWithMedicalList')
      .then((res) => {
        if (res != "") {
          queryWithMedicalList.value = res;
        } else {
          ElMessage({
            message: '暂时没有待就诊的患者',
            type: 'success',
          })
        }
      })
  } else if (tab.props.name == "就诊中列表") {
    http.get('/hisRegistration/queryTheListOfVisitsInProgress')
      .then((res) => {
        if (res != "") {
          queryTheListOfVisitsInProgress.value = res;
        } else {
          ElMessage({
            message: '暂时没有就诊中的患者',
            type: 'success',
          })
        }
      })
  } else if (tab.props.name == "就诊完成列表") {
    http.get('/hisRegistration/queryTheListOfCompletedMedicalVisits', {
      params: {
        pageNum: pageNum.value,
        pageSize: pageSize.value,
      }
    })
      .then((res) => {
        console.log(res)
        if (res != "") {
          queryTheListOfCompletedMedicalVisits.value = res.list;
          total.value = res.total
        } else {
          ElMessage({
            message: '暂时没有就诊完成的患者',
            type: 'success',
          })
        }
      })
  }
}


//查询就诊完成列表
function queryTheListOfCompletedMedicalVisitsFF() {
  http.get('/hisRegistration/queryTheListOfCompletedMedicalVisits', {
    params: {
      pageNum: pageNum.value,
      pageSize: pageSize.value,
    }
  })
    .then((res) => {
      console.log(res)
      if (res != "") {
        queryTheListOfCompletedMedicalVisits.value = res.list;
        total.value = res.total
      } else {
        ElMessage({
          message: '暂时没有就诊完成的患者',
          type: 'success',
        })
      }
    })
}

//当前页发生改变
const handleCurrentChange = (val: number) => {
  pageNum.value = val
  //获取当前页的数据
  queryTheListOfCompletedMedicalVisitsFF()
}

//接诊
const receiveAPatientForTreatment = (index: number, row) => {
  http.get('/hisPatient/receiveAPatientForTreatment?id=' + row.patientId)
    .then((res) => {
      if (res != '') {
        console.log(res)
        patientInformation.value = res;
      }
    })
  http.get('/hisRegistration/receiveAPatientForTreatment?id=' + row.patientId)
    .then((res) => {
      if (res != '') {
        console.log(res)
        regId.value = res;
      }
    })
  http.get('/hisRegistration/modifyReceiveAPatientForTreatment?id=' + row.patientId)
    .then((res) => {
      console.log(res)
    })
  centerDialogVisible.value = false;
}

//挂号单ID
const regId = ref('');
//病例ID
const chId = ref('');


//就诊完成的方法
function concludePatientVisit() {
  http.get('/hisRegistration/concludePatientVisit?id=' + regId.value)
    .then((res) => {
      if (res == 1) {
        ElMessage({
          message: '就诊完成',
          type: 'success',
        })
      }
    })
}

//添加检查处方的对话框显示
const addCheckPrescription = ref(false);
//检查处方表格
const checkPrescriptionTableData = ref([])
function createCheckPrescription() {
  addCheckPrescription.value = true;
}
//检查备注
const checkTheRemarks = ref('无');
//金额
const totalAmount = ref(0);
// 计算总金额的函数
function calculateTotalAmount() {
  let sum = 0;
  selectedItems.value.forEach(item => {
    if (item.unitPrice) {
      sum += parseFloat(item.unitPrice);
    }
  });
  totalAmount.value = sum;
}

//检查项抽屉
const inspectionItemsDrawer = ref(false);
//检查项的表格数据
const inspectionItemsTableData = ref([{
  checkItemId: '',
  checkItemName: '',
  keywords: '',
  unitPrice: 0,
  unit: ''
}])
//检查项的方法
function inspectionItems() {
  inspectionItemsDrawer.value = true;
  http.get('/sci/searchFor?keywords=' + keywords.value)
    .then((res) => {
      if (res != null) {
        inspectionItemsTableData.value = res;
      }
    })
}

//搜索
function searchFor() {
  inspectionItems()
}

//关键字
const keywords = ref('')
//重置
function reset() {
  keywords.value = '';
  inspectionItems()
}

// 添加检查项
function addInspectionItemsTableData() {
  checkPrescriptionTableData.value = selectedItems.value;
  const newData = [];
  inspectionItemsTableData.value.forEach(item => {
    newData.push(item);
  });
  console.log('添加后的新数据:', newData);
  newData.length = 0;
  inspectionItemsDrawer.value = false;
  calculateTotalAmount();
}

// 存储选中的项
const selectedItems = ref([]);

// 处理选择变化的函数
function handleSelectionChange(selection) {
  calculateTotalAmount();
  selectedItems.value = selection;
}


// 删除检查项
const handleDelete = (index: number, row) => {
  // 从 checkPrescriptionTableData 中移除指定索引的元素
  checkPrescriptionTableData.value.splice(index, 1);
  // 重新计算总金额
  calculateTotalAmount();
};

const hisCareOrder = ref({
  chId:'',
  coType: '0',
  userId: '',
  patientId: '',
  patientName: '',
  allAmount: 0,
})

const hisCareOrder1 = ref({
  coId: '',
  itemRefId: '',
  itemName: '',
  itemType: 0,
  num: 0,
  price: 0,
  amount: 0,
  remark: '',
  status: 0,
})


//最新的药品处方信息
const newMedicinalPrescription = ref([{
  coId: '',
  createTime: ''
}])
//添加
function confirmToAdd() {
  //给参数赋值
  const userStore = useUserStore();
  const user = userStore.getUser.value;
  caseList.value.userId = user.userId;
  caseList.value.userName = user.userName;
  const patientId = patientInformation.value.patientId;
  const patientName = patientInformation.value.patientName;
  hisCareOrder.value.patientId = patientId;
  hisCareOrder.value.patientName = patientName;
  hisCareOrder.value.allAmount = totalAmount.value;
  hisCareOrder.value.chId = chId.value;

  //发送请求
  http.post('/hisCareOrde/addHisCareOrder', hisCareOrder.value)
    .then((res) => {
      if (res == 1) {
        http.get('/hisCareOrde/getNewMedicinalPrescription')
          .then((res) => {
            if (res != "") {
              newMedicinalPrescription.value = res;
              checkPrescriptionTableData.value.forEach(item => {
                // 创建一个新对象存储提取的信息
                const newOrderItem = {
                  item_ref_id: item.checkItemId,
                  item_name: item.checkItemName,
                  checkTheRemarks: item.checkTheRemarks,
                  unitPrice: item.unitPrice,
                };
                hisCareOrder1.value.itemRefId = newOrderItem.item_ref_id;
                hisCareOrder1.value.itemName = newOrderItem.item_name;
                hisCareOrder1.value.remark = checkTheRemarks.value;
                hisCareOrder1.value.coId = newMedicinalPrescription.value.coId;
                console.log(newMedicinalPrescription.value.coId);
                hisCareOrder1.value.num = 1;
                hisCareOrder1.value.price = newOrderItem.unitPrice;
                http.post('/hco/addHisCareOrderItem', hisCareOrder1.value)
                  .then((res) => {
                    if (res == 1) {
                      ElMessage({
                        message: '添加成功',
                        type: 'success',
                      })
                    }
                  })
              });
            }
          })
        ElMessage({
          message: '添加成功',
          type: 'success',
        })

        addMedicinalPrescription.value = false;
      }
    })
}

//添加药用处方
//控制添加药用处方的对话框
const addMedicinalPrescription = ref(false);
//药用处方的数据
const medicinalPrescriptionTableData = ref([])

function medicinalPrescriptionChick() {
  addMedicinalPrescription.value = true;
}
let drugListDataPageNum = ref(1)
//每页条数
let drugListDataPageSize = ref(12)
//总条数
let drugListDataTotal = ref(0)
//添加药品项
function drugItems() {
  addMedicinalListDrawer.value = true;
  http.get('/stockMedicines/getAll', {
    params: {
      pageNum: drugListDataPageNum.value,
      pageSize: drugListDataPageSize.value,
      medicinesName: medicinesName.value
    }
  })
    .then((res) => {
      if (res != "") {
        drugListData.value = res.list;
        drugListDataTotal.value = res.total
      }
    })
}

//当前页发生改变
const drugListDataHandleCurrentChange = (val: number) => {
  drugListDataPageNum.value = val
  //获取当前页的数据
  drugItems()
}

//搜索
function searchForDrugListData() {
  drugItems()
}
//重置
function resetDrugListData() {
  medicinesName.value = ('');
  drugItems()
}
//控制添加药品项的抽屉
const addMedicinalListDrawer = ref(false)
//搜索的药品名称
const medicinesName = ref('')
//药品数据
const drugListData = ref([])
//添加药品
function addDrugListData() {
  medicinalPrescriptionTableData.value = selectedItemsMedicine.value;
  const newData = [];
  selectedItemsMedicine.value.forEach(item => {
    newData.push(item);
  });
  console.log('添加后的新数据:', newData);
  newData.length = 0;
  addMedicinalListDrawer.value = false;
  calculateTotalAmountMedicine();
}

// 存储选中的项
const selectedItemsMedicine = ref([]);

// 处理选择变化的函数
function handleSelectionChangeMedicine(selectionMedicine) {
  calculateTotalAmountMedicine();
  selectedItemsMedicine.value = selectionMedicine;
}

//金额
const totalAmountMedicine = ref(0);
// 计算总金额的函数
function calculateTotalAmountMedicine() {
  let sum = 0;
  selectedItemsMedicine.value.forEach(item => {
    if (item.prescriptionPrice) {
      sum += parseFloat(item.prescriptionPrice);
    }
  });
  totalAmountMedicine.value = sum;
}

// 删除检查项
const handleDeleteMedicine = (index: number, row) => {
  // 从 checkPrescriptionTableData 中移除指定索引的元素
  medicinalPrescriptionTableData.value.splice(index, 1);
  // 重新计算总金额
  calculateTotalAmountMedicine();
};




const hisCareOrderMedicine = ref({
  chId:'',
  coType: '1',
  userId: '',
  patientId: '',
  patientName: '',
  allAmount: 0,
})

const hisCareOrder1Medicine = ref({
  coId: '',
  itemRefId: '',
  itemName: '',
  itemType: 1,
  num: 0,
  price: 0,
  amount: 0,
  remark: '',
  status: 0,
})

//最新的药品处方信息
const newMedicinalPrescriptionMedicine = ref([{
  coId: '',
  createTime: ''
}])

function confirmTheAdditionOfMedication() {
  const userStore = useUserStore();
  const user = userStore.getUser.value;
  caseList.value.userId = user.userId;
  caseList.value.userName = user.userName;
  const patientId = patientInformation.value.patientId;
  const patientName = patientInformation.value.patientName;
  hisCareOrderMedicine.value.patientId = patientId;
  hisCareOrderMedicine.value.patientName = patientName;
  hisCareOrderMedicine.value.allAmount = totalAmount.value;
  hisCareOrderMedicine.value.chId = chId.value;

  http.post('/hisCareOrde/addHisCareOrder', hisCareOrderMedicine.value)
    .then((res) => {
      if (res == 1) {
        http.get('/hisCareOrde/getNewMedicinalPrescriptionY')
          .then((res) => {
            if (res != "") {
              newMedicinalPrescriptionMedicine.value = res;
              medicinalPrescriptionTableData.value.forEach(item => {
                //创建一个新对象存储提取的信息
                const newOrderItem = {
                  item_ref_id: item.medicinesId,
                  item_name: item.medicinesName,
                  checkTheRemarks: item.checkTheRemarks,
                  unitPrice: item.prescriptionPrice,
                };
                hisCareOrder1Medicine.value.itemRefId = newOrderItem.item_ref_id;
                hisCareOrder1Medicine.value.itemName = newOrderItem.item_name;
                hisCareOrder1Medicine.value.remark = checkTheRemarks.value;
                hisCareOrder1Medicine.value.coId = newMedicinalPrescriptionMedicine.value.coId;
                console.log(newMedicinalPrescriptionMedicine.value.coId);
                hisCareOrder1Medicine.value.num = 1;
                hisCareOrder1Medicine.value.price = newOrderItem.unitPrice;
                http.post('/hco/addHisCareOrderItem', hisCareOrder1Medicine.value)
                  .then((res) => {
                    if (res == 1) {
                      ElMessage({
                        message: '添加成功',
                        type: 'success',
                      })
                    }
                  })
              });
            }
          })
      }
    })
}

//折叠面板
const activeNames = ref(['1'])
const handleChange = (val: string[]) => {
  console.log(val)
}
</script>
<template>
  <el-row>
    <div>
      <el-segmented v-model="HangingTypeValue" :options="HangingType" />
    </div>
  </el-row>
  <br>
  <el-row>
    <el-col :span="6" style="margin-left: 20px;">
      <el-form ref="ruleFormRef" style="max-width: 300px" :model="patientInformation" status-icon label-width="auto"
        class="demo-ruleForm">
        <el-form-item label="患者姓名" prop="pass">
          <el-input v-model="patientInformation.patientName" type="text" autocomplete="off" placeholder="请输入患者姓名" />
          <el-button type="info" style="margin-left: 232px; margin-top: -34px;" :icon="User"
            @click="queryPatientInformation"></el-button>
        </el-form-item>
        <el-form-item label="身份证号" prop="checkPass">
          <el-input v-model="patientInformation.idCard" type="text" autocomplete="off" placeholder="请输入患者身份证号" />
        </el-form-item>
        <el-form-item label="患者电话" prop="checkPass">
          <el-input v-model="patientInformation.phone" type="text" autocomplete="off" placeholder="请输入患者电话" />
        </el-form-item>
        <el-form-item label="性别">
          <div id="app">
            <input type="radio" id="male" v-model="patientInformation.sex" :checked="patientInformation.sex === '0'"
              value="0">
            <label for="male">男</label>
            <input type="radio" id="female" v-model="patientInformation.sex" :checked="patientInformation.sex === '1'"
              value="1">
            <label for="female">女</label>
            <input type="radio" id="unknown" v-model="patientInformation.sex" :checked="patientInformation.sex === '2'"
              value="2">
            <label for="unknown">未知</label>
          </div>
        </el-form-item>
        <el-form-item label="出生日期" prop="checkPass">
          <div class="block">
            <el-date-picker type="date" v-model="patientInformation.birthday" placeholder="出生日期"
              :default-value="new Date(2024, 1, 1)" style="width: 232px;" />
          </div>
        </el-form-item>
        <el-form-item label="患者年龄" prop="checkPass">
          <el-input v-model="patientInformation.age" type="text" autocomplete="off" placeholder="请输入患者年龄" />

        </el-form-item>
        <el-form-item label="地址信息" prop="checkPass">
          <el-input v-model="patientInformation.address" show-word-limit="true" maxlength="30" type="textarea"
            autocomplete="off" placeholder="请输入地址信息" />
        </el-form-item>
        <el-form-item label="过敏史" prop="checkPass">
          <el-input v-model="patientInformation.allergyInfo" show-word-limit="true" maxlength="100" type="textarea"
            autocomplete="off" placeholder="请输入患者过敏史" />
        </el-form-item>
      </el-form>

      <el-tabs v-model="patientData" class="demo-tabs" @tab-click="patientDataClick">
        <el-tab-pane label="患者档案" name="患者档案">暂无患者档案</el-tab-pane>
        <el-tab-pane label="历史病例" name="历史病例">暂无历史病例</el-tab-pane>
      </el-tabs>
    </el-col>
    <el-col :span="17" style="margin-left: 35px;">
      <el-row>
        <el-col :span="6">
          挂号单ID：<span style="color: red;" v-if="regId == ''">选择患者后显示</span> <span v-else>{{ regId }}</span>
          <br>
          病例编号：<span style="color: red;" v-if="chId == ''">保存病例后生成</span> <span v-else>{{ chId }}</span>
        </el-col>
        <el-col :span="6">
          <div class="grid-content ep-bg-purple-light" />
        </el-col>
        <el-col :span="6">
          <div class="grid-content ep-bg-purple" />
        </el-col>
        <el-col :span="6">
          <el-button type="primary" :icon="Check" @click="saveCases">保存病例</el-button>
          <el-button type="primary" :icon="Finished" @click="concludePatientVisit">就诊完成</el-button>
        </el-col>
      </el-row>
      <br>
      <el-row>
        <el-col :span="24">
          <el-tabs v-model="caseOrPrescription" type="card" class="demo-tabs" @tab-click="caseOrPrescriptionClick">
            <el-tab-pane label="病例" name="病例">
              <el-row>
                <el-col :span="24">
                  <el-row>
                    <el-col :span="8">
                      <el-form-item label="出生日期" prop="checkPass">
                        <div class="block">
                          <el-date-picker type="date" v-model="patientInformation.birthday" placeholder="出生日期"
                            :default-value="new Date(2024, 1, 1)" style="width: 200px;" />
                        </div>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="接诊类型" style="width: 280px;">
                        <el-select placeholder="接诊类型" v-model="caseList.receiveType" clearable>
                          <el-option label="初诊" value="0" />
                          <el-option label="复诊" value="1" />
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="是否传染" style="width: 280px;">
                        <el-select placeholder="是否传染" v-model="caseList.isContagious" clearable>
                          <el-option label="是" value="0" />
                          <el-option label="否" value="1" />
                        </el-select>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="24">
                  <el-form-item label="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;主诉" prop="checkPass"
                    style="width: 900px;">
                    <el-input type="textarea" v-model="caseList.caseTitle" autocomplete="off" placeholder="请输入主诉"
                      rows="3" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="诊断信息" prop="checkPass" style="width: 900px;">
                    <el-input type="textarea" v-model="caseList.caseResult" autocomplete="off" placeholder="请输入诊断信息"
                      rows="3" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="医生建议" prop="checkPass" style="width: 900px;">
                    <el-input type="textarea" v-model="caseList.doctorTips" autocomplete="off" placeholder="请输入医生建议"
                      rows="3" />
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="24">
                  <el-form-item label="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;备注" prop="checkPass"
                    style="width: 900px;">
                    <el-input type="textarea" autocomplete="off" v-model="caseList.remark" placeholder="请输入备注"
                      rows="3" />
                  </el-form-item>
                </el-col>
              </el-row>
            </el-tab-pane>
            <el-tab-pane label="处方" name="处方">
              <el-button type="primary" :icon="Plus" @click="medicinalPrescriptionChick">添加药用处方</el-button>
              <el-button type="primary" :icon="Plus" @click="createCheckPrescription">添加检查处方</el-button>

              <el-row>
                <el-col :span="24">
                  <div class="demo-collapse">
                    <el-collapse v-model="activeNames" @change="handleChange">
                      <el-collapse-item :title="'【检查处方】【1】【处方金额】：￥' + totalAmount" name="1">
                        <div>
                          <el-table :data="checkPrescriptionTableData" border style="width: 100%" empty-text="暂无数据">
                            <el-table-column property="checkItemId" label="序号" align="center" />
                            <el-table-column property="checkItemName" label="项目名称" align="center" />
                            <el-table-column property="unit" label="单位" align="center" />
                            <el-table-column property="unitPrice" label="单价（元）" align="center" />
                            <el-table-column property="unitPrice" label="金额（元）" align="center" />
                            <el-table-column property="checkTheRemarks" label="检查备注" align="center" />
                            <el-table-column label="操作">
                              <template #default="scope">
                                <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">
                                  删除
                                </el-button>
                              </template>
                            </el-table-column>
                          </el-table>
                        </div>
                      </el-collapse-item>

                      <el-collapse-item :title="'【药品处方】【2】【处方金额】：￥' + totalAmountMedicine" name="2">
                        <div>
                          <el-table :data="medicinalPrescriptionTableData" border style="width: 100%" empty-text="暂无数据">
                            <el-table-column property="medicinesId" label="序号" align="center" />
                            <el-table-column property="medicinesName" label="药品名称" align="center" />
                            <el-table-column property="unit" label="单位" align="center" />
                            <el-table-column property="prescriptionPrice" label="单价（元）" align="center" />
                            <el-table-column property="prescriptionPrice" label="金额（元）" align="center" />
                            <el-table-column property="checkTheRemarks" label="服用备注" align="center" />
                            <el-table-column label="操作">
                              <template #default="scope">
                                <el-button size="small" type="danger"
                                  @click="handleDeleteMedicine(scope.$index, scope.row)">
                                  删除
                                </el-button>
                              </template>
                            </el-table-column>
                          </el-table>
                        </div>
                      </el-collapse-item>


                    </el-collapse>
                  </div>
                </el-col>
              </el-row>


            </el-tab-pane>
          </el-tabs>
        </el-col>
      </el-row>

    </el-col>
  </el-row>

  <!-- 查询待就诊的患者的模态框 -->
  <el-dialog v-model="centerDialogVisible" title="选择挂号患者" width="600" center>
    <el-row>
      <el-col :span="24">
        <el-tabs v-model="selectRegisteredPatients" type="card" class="demo-tabs"
          @tab-click="selectRegisteredPatientsClick" stretch="true">
          <el-tab-pane label="待就诊列表" name="待就诊列表">
            <el-table :data="queryWithMedicalList" border style="width: 100%">
              <el-table-column property="patientId" label="患者编号" />
              <el-table-column property="patientName" label="流水编号" />
              <el-table-column label="挂号类型">
                <template #default="scope">
                  <span v-if="scope.row.schedulingType == 1">门诊</span>
                  <span v-else-if="scope.row.schedulingType == 2">门诊+病例本</span>
                  <span v-else-if="scope.row.schedulingType == 3">急诊</span>
                  <span v-else-if="scope.row.schedulingType == 4">急诊+病例本</span>
                  <span v-else-if="scope.row.schedulingType == 5">孕诊</span>
                  <span v-else-if="scope.row.schedulingType == 6">孕诊+病例本</span>
                </template>
              </el-table-column>
              <el-table-column label="操作">
                <template #default="scope">
                  <el-button size="small" type="primary" @click="receiveAPatientForTreatment(scope.$index, scope.row)">
                    接诊
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="就诊中列表" name="就诊中列表">
            <el-table :data="queryTheListOfVisitsInProgress" border style="width: 100%">
              <el-table-column property="patientId" label="患者编号" />
              <el-table-column property="patientName" label="流水编号" />
              <el-table-column label="挂号类型">
                <template #default="scope">
                  <span v-if="scope.row.schedulingType == 1">门诊</span>
                  <span v-else-if="scope.row.schedulingType == 2">门诊+病例本</span>
                  <span v-else-if="scope.row.schedulingType == 3">急诊</span>
                  <span v-else-if="scope.row.schedulingType == 4">急诊+病例本</span>
                  <span v-else-if="scope.row.schedulingType == 5">孕诊</span>
                  <span v-else-if="scope.row.schedulingType == 6">孕诊+病例本</span>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="就诊完成列表" name="就诊完成列表">
            <el-table :data="queryTheListOfCompletedMedicalVisits" border style="width: 100%;">
              <el-table-column property="patientId" label="患者编号" />
              <el-table-column property="patientName" label="流水编号" />
              <el-table-column label="挂号类型">
                <template #default="scope">
                  <span v-if="scope.row.schedulingType == 1">门诊</span>
                  <span v-else-if="scope.row.schedulingType == 2">门诊+病例本</span>
                  <span v-else-if="scope.row.schedulingType == 3">急诊</span>
                  <span v-else-if="scope.row.schedulingType == 4">急诊+病例本</span>
                  <span v-else-if="scope.row.schedulingType == 5">孕诊</span>
                  <span v-else-if="scope.row.schedulingType == 6">孕诊+病例本</span>
                </template>
              </el-table-column>
            </el-table>
            <!-- 分页 -->
            <el-row justify="center">
              <el-col :span="12" :offset="6">
                <el-pagination background layout="prev, pager,next,total" :total="total" :page-size="pageSize"
                  v-model:current-page="pageNum" @current-change="handleCurrentChange" />
              </el-col>
            </el-row>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
  </el-dialog>

  <!-- 添加检查处方的对话框 -->
  <el-dialog v-model="addCheckPrescription" title="添加【检查】处方" width="900" center>
    <el-button type="primary" :icon="Plus" style="background-color: #13CE67;" @click="confirmToAdd">确定添加</el-button><br>
    <span style="float: right;">检查处方金额：{{ totalAmount }}￥</span>
    <el-table :data="checkPrescriptionTableData" border style="width: 100%" empty-text="暂无数据">
      <el-table-column property="checkItemId" label="序号" align="center" />
      <el-table-column property="checkItemName" label="项目名称" align="center" />
      <el-table-column property="unit" label="单位" align="center" />
      <el-table-column property="unitPrice" label="单价（元）" align="center" />
      <el-table-column property="unitPrice" label="金额（元）" align="center" />
      <el-table-column label="检查备注" align="center">
        <el-input type="text" autocomplete="off" v-model="checkTheRemarks" placeholder="请输入检查备注" rows="3" />
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-button type="primary" style="background-color: #1690FF; width: 100%"
      @click="inspectionItems">添加检查项</el-button><br>
  </el-dialog>

  <!-- 添加检查项的抽屉 -->
  <el-drawer v-model="inspectionItemsDrawer" direction="rtl" size="50%">
    <template #header>
      <div style="text-align: center; font-weight: bold;">检查项目列表</div>
    </template>

    <el-col :span="17">
      <el-row>
        <el-col :span="13">
          <el-form-item label="关键字">
            <el-input v-model="keywords" type="text" autocomplete="off" placeholder="请输入关键字" property="name" />
          </el-form-item>
        </el-col>
        &nbsp;
        <el-col :span="4">
          <el-button type="primary" :icon="Search" @click="searchFor">搜索</el-button>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" :icon="Refresh" @click="reset">重置</el-button>
        </el-col>
      </el-row>
      <div class="grid-content ep-bg-purple"></div>
    </el-col>

    <el-table :data="inspectionItemsTableData" style="width: 100%" empty-text="暂无数据"
      @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" />
      <el-table-column property="checkItemId" label="项目费用ID" />
      <el-table-column property="checkItemName" label="项目名称" />
      <el-table-column property="keywords" label="关键字" />
      <el-table-column property="unitPrice" label="项目单价" />
      <el-table-column property="unit" label="单位" />
    </el-table>

    <template #footer>
      <div style="text-align: center; font-weight: bold; ">
        <el-button @click="addInspectionItemsTableData">添加并关闭</el-button>
      </div>
    </template>
  </el-drawer>


  <!-- 添加药用处方的对话框 -->
  <el-dialog v-model="addMedicinalPrescription" title="添加【药用】处方" width="900" center>
    <el-button type="primary" :icon="Plus" style="background-color: #13CE67;"
      @click="confirmTheAdditionOfMedication">确定添加</el-button><br>
    <span style="float: right;">检查药用金额：{{ totalAmountMedicine }}￥</span>
    <el-table :data="medicinalPrescriptionTableData" border style="width: 100%" empty-text="暂无数据">
      <el-table-column property="medicinesId" label="序号" align="center" />
      <el-table-column property="medicinesName" label="药品名称" align="center" />
      <el-table-column property="unit" label="单位" align="center" />
      <el-table-column property="prescriptionPrice" label="单价（元）" align="center" />
      <el-table-column property="prescriptionPrice" label="金额（元）" align="center" />
      <el-table-column label="服用备注" align="center">
        <el-input type="text" autocomplete="off" v-model="checkTheRemarks" placeholder="请输入药品备注" rows="3" />
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button size="small" type="danger" @click="handleDeleteMedicine(scope.$index, scope.row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-button type="primary" style="background-color: #1690FF; width: 100%" @click="drugItems">添加药品项</el-button><br>
  </el-dialog>

  <!-- 添加药用列表的抽屉 -->
  <el-drawer v-model="addMedicinalListDrawer" direction="rtl" size="50%">
    <template #header>
      <div style="text-align: center; font-weight: bold;">药品列表</div>
    </template>

    <el-col :span="17">
      <el-row>
        <el-col :span="13">
          <el-form-item label="药品名称">
            <el-input v-model="medicinesName" type="text" autocomplete="off" placeholder="请输入药品名称" property="name" />
          </el-form-item>
        </el-col>
        &nbsp;
        <el-col :span="4">
          <el-button type="primary" :icon="Search" @click="searchForDrugListData">搜索</el-button>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" :icon="Refresh" @click="resetDrugListData">重置</el-button>
        </el-col>
      </el-row>
      <div class="grid-content ep-bg-purple"></div>
    </el-col>

    <el-table :data="drugListData" style="width: 100%" empty-text="暂无数据"
      @selection-change="handleSelectionChangeMedicine">
      <el-table-column type="selection" width="55" />
      <el-table-column property="medicinesId" label="药品ID" />
      <el-table-column property="medicinesName" label="药品名称" />
      <el-table-column property="medicinesStockNum" label="库存量" />
      <el-table-column property="unit" label="单位" />
      <el-table-column property="conversion" label="换算量" />
    </el-table>

    <!-- 分页 -->
    <el-row justify="center">
      <el-col :span="12" :offset="6">
        <el-pagination background layout="prev, pager,next,total" :total="drugListDataTotal"
          :page-size="drugListDataPageSize" v-model:current-page="drugListDataPageNum"
          @current-change="drugListDataHandleCurrentChange" />
      </el-col>
    </el-row>

    <template #footer>
      <div style="text-align: center; font-weight: bold; ">
        <el-button @click="addDrugListData">添加并关闭</el-button>
      </div>
    </template>
  </el-drawer>
</template>
<style scoped></style>
